<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/mui.picker.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/hotelInfo.css" />
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-transparent" style="line-height: 44px;text-align: center;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
			<div id="headTabs" class="head-tabs" style="">
				<div tabindex="1" class="head-tab head-tab-active">封面</div>
				<div tabindex="2" class="head-tab">外观</div>
				<div tabindex="3" class="head-tab">客房</div>
				<div tabindex="4" class="head-tab">餐厅</div>
			</div>
		</header>
		<div class="mui-content">
			<img id="img1" style="width: 100%;height:255px;z-index: 2;" src="./images/yuantiao.jpg" />
			<div class="hotel-info-area">
				<div class="hotel-name">漫鹿CC酒店(西安港务大道地铁站店)</div>
				<div style="display: flex;align-items: center;font-size: 14px;margin-top: 4px;">
					<div class="shield">金</div>
					<div style="color: #7F7F7F;">公寓</div>
				</div>
				<div class="flex-spacebetween" style="color: #7F7F7F;font-size: 10px;">
					<div style="display: flex;">
						<span>2021年开业丨</span>
						<span class="icon-item"><img class="icon-img" src="./images/p.png" alt="">停车场</span>
						<span class="icon-item"><img class="icon-img" src="./images/bag.png" alt="">行李寄存</span>
						<span class="icon-item"><img class="icon-img" src="./images/reception.png" alt="">24小时前台</span>
						<span class="icon-item"><img class="icon-img" src="./images/wifi.png" alt="">公用区wifi</span>
					</div>
					<div style="transform: rotate(-90deg);margin-left: 15px;">
						<img src="./images/arrow.png" style="width: 14px;height: 14px">
					</div>
				</div>
				<div class="flex-spacebetween" style="font-size: 10px;margin-top: 10px;">
					<div class="score" style="">
						<div class="score-num" style="">4.9</div>
						<div class="" style="color:#534ABA;margin-left: 6px;">超棒丨555条评论</div>
					</div>
					<div style="color: #7F7F7F;font-size: 14px;">555条评论</div>
				</div>
				<div class="flex-spacebetween address-area">
					<div class="address-left">
						<div style="font-weight: 600;">国展中心/浐灞国际港务区丨国际港务区港务大道99号陆港金融小镇瑞斯丽悦庭2-1000号</div>
						<div style="color: #7F7F7F;">距您直线2.5公里丨靠近中西部陆港金融小镇</div>
					</div>
					<div class="address-right">
						<img style="width: 25px;height: 25px;" src="./images/address.png" alt="">
						<div style="font-size: 10px;color: #7F7F7F;">地图</div>
					</div>
				</div>
				<div class="flex-spacebetween" style="margin-top: 10px;">
					<div style="display: flex;">
						<div class="red-tab-item">85折起</div>
						<div class="red-tab-item">85折起</div>
						<div class="red-tab-item">85折起</div>
						<div class="red-tab-item">85折起</div>
					</div>
					<div style="display: flex;font-size: 10px; color: #7F7F7F;">
						<div>查看</div>
						<div style="transform: rotate(-90deg);margin-left: 10px;">
							<img src="./images/arrow.png" style="width: 14px;height: 14px">
						</div>
					</div>
					
				</div>
			</div>
		</div>
		
		<div class="write-change-info flex-spacebetween">
			<div class="" style="display: flex;align-items: center;">
				<div class="date-area">
					<span class="date-font1">01-06</span>
					<span class="date-font2"> 今天入住</span>
				</div>
				<div style="font-size: 10px;margin: 0 10px;">共一晚</div>
				<div class="date-area">
					<span class="date-font1">01-07</span>
					<span class="date-font2"> 明天离店</span>
				</div>
			</div>
			<div class="address-right">
				<img style="width: 15px;height: 15px;" src="./images/calender.png" alt="">
				<div style="font-size: 10px;color: #7F7F7F;">低价日历</div>
			</div>
		</div>
		
		<div id="hotelTabs" class="hotel-tabs-area">
			<div tabInfo="1" class="tab-item tab-item-active">分期免息</div>
			<div tabInfo="2" class="tab-item">含早餐</div>
			<div tabInfo="3" class="tab-item">到店付</div>
			<div tabInfo="4" class="tab-item">同城直营</div>
		</div>
		
		<div class="hotel-room-area">
			<div class="room-item">
				<img src="./images/cbd.jpg" class="room-img" alt="">
				<div class="room-item-right">
					<div>
						<div class="room-name">漫选特惠随机房</div>
						<div class="room-info-font">无餐食   不可取消</div>
						<div class="room-info-font">35-45平米   大床房1.8米</div>
					</div>
					<div class="price-area">
						<div style="display: flex;flex-direction: column;width: 100%;">
							<div class="room-item-right-bottom">
								<div class="price-bottom">
									<div class="before-price">￥229</div>
									<div class="real-price">￥150</div>
								</div>
							</div>
							<div class="room-preferential" style="">
								门店新客 丨体验白金特权丨优惠￥98元
							</div>
						</div>
						<div class="due-button">
							<div class="due-top">订</div>
							<div class="due-bottom">在线付</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="hotel-room-area">
			<div class="room-item">
				<img src="./images/cbd.jpg" class="room-img" alt="">
				<div class="room-item-right">
					<div>
						<div class="room-name">漫选特惠随机房</div>
						<div class="room-info-font">无餐食   不可取消</div>
						<div class="room-info-font">35-45平米   大床房1.8米</div>
					</div>
					<div class="price-area">
						<div style="display: flex;flex-direction: column;width: 100%;">
							<div class="room-item-right-bottom">
								<div class="price-bottom">
									<div class="before-price">￥229</div>
									<div class="real-price">￥150</div>
								</div>
							</div>
							<div class="room-preferential" style="">
								门店新客 丨体验白金特权丨优惠￥98元
							</div>
						</div>
						<div class="due-button">
							<div class="due-top">订</div>
							<div class="due-bottom">在线付</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="hotel-room-area">
			<div class="room-item">
				<img src="./images/cbd.jpg" class="room-img" alt="">
				<div class="room-item-right">
					<div>
						<div class="room-name">漫选特惠随机房</div>
						<div class="room-info-font">无餐食   不可取消</div>
						<div class="room-info-font">35-45平米   大床房1.8米</div>
					</div>
					<div class="price-area">
						<div style="display: flex;flex-direction: column;width: 100%;">
							<div class="room-item-right-bottom">
								<div class="price-bottom">
									<div class="before-price">￥229</div>
									<div class="real-price">￥150</div>
								</div>
							</div>
							<div class="room-preferential" style="">
								门店新客 丨体验白金特权丨优惠￥98元
							</div>
						</div>
						<div class="due-button">
							<div class="due-top">订</div>
							<div class="due-bottom">在线付</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<div class="hotel-room-area">
			<div class="room-item">
				<img src="./images/cbd.jpg" class="room-img" alt="">
				<div class="room-item-right">
					<div>
						<div class="room-name">漫选特惠随机房</div>
						<div class="room-info-font">无餐食   不可取消</div>
						<div class="room-info-font">35-45平米   大床房1.8米</div>
					</div>
					<div class="price-area">
						<div style="display: flex;flex-direction: column;width: 100%;">
							<div class="room-item-right-bottom">
								<div class="price-bottom">
									<div class="before-price">￥229</div>
									<div class="real-price">￥150</div>
								</div>
							</div>
							<div class="room-preferential" style="">
								门店新客 丨体验白金特权丨优惠￥98元
							</div>
						</div>
						<div class="due-button">
							<div class="due-top">订</div>
							<div class="due-bottom">在线付</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/jquery-3.5.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
			//这里是头部tab切换
			$('#headTabs').children().on('click', function(e) {
				// 这里执行点击父级 div 时的操作
				$('.head-tab').removeClass('head-tab-active');
				$(this).addClass('head-tab-active');
				let arr = $(this).attr('tabindex')
				$('#img1').attr('src', './images/fu.png')
				console.log(arr);
				// alert('Child clicked: ');
			});
			
			//这里是下方tab切换
			
			$('#hotelTabs').children().on('click', function(e) {
				// 这里执行点击父级 div 时的操作
				$('.tab-item').removeClass('tab-item-active');
				$(this).addClass('tab-item-active');
				let arr = $(this).attr('tabInfo')
				// alert('Child clicked: ');
			});
		</script>
	</body>

</html>
